<template>
  <view class="top">
    <uni-card v-for="(item, index) in newCar" style="border-radius: 10px;margin-top: 0px;height: 150px;">
      <view style="display: flex;margin-top: 15px;">
        <image style="height: 50px;width: 50px;border-radius: 50%;margin-right: 10px;"
               src="../../../static/images/ly/Letter.jpg"></image>
        <view>
          <view style="font-weight: bold;font-size: 18px;">车型：{{ maDou[item.carType] }}-{{
              a91tv[item.carModel]
            }}
          </view>
          <view style="margin-top: 10px;font-size: 15px;">车牌：{{ item.carNumber }}</view>
        </view>
      </view>
      <!--      <u-radio-group style="margin-top: 30px;display:flex;justify-content: space-between;" v-model="value">-->
      <u-radio-group style="margin-top: 30px;display:flex;justify-content: space-between;">
        <u-radio activeColor="red" label="设为默认车辆"></u-radio>
        <view @click="deleteCar(index)">删除</view>
      </u-radio-group>
    </uni-card>

    <u-tabbar
        :fixed="true"
        :placeholder="true"
        :safeAreaInsetBottom="true"
        :border="false"
    >
      <button class="button" type="primary" @click="addCar">+ 添加车辆</button>
    </u-tabbar>

    <!--    <u-tabbar-->
    <!--        :value="value6"-->
    <!--        @change="name => value6 = name"-->
    <!--        :fixed="true"-->
    <!--        :placeholder="true"-->
    <!--        :safeAreaInsetBottom="true"-->
    <!--        :border="false"-->
    <!--    >-->
    <!--      <button class="button" type="primary">+ 添加车辆</button>-->
    <!--    </u-tabbar>-->


  </view>
</template>

<script>
export default {
  data() {
    return {
      isFirstLoaded:false,//判断是否是第一次加载页面
      car: [],
      newCar: [],
      maDou: ['宝马', '奥迪', '法拉利'],
      a91tv: ['旗舰款', '限定款', '正常款'],
    }
  },
  methods: {
    addCar() {
      uni.$u.route({
        url: '/pages/ly/vehicle/addcar2',
      });
    },
    deleteCar(index) {
      const that = this;
      uni.showModal({
        title: '提示',
        content: '确定要删除这个车辆吗?',
        success: function (res) {
          if (res.confirm) {
            that.$http({
              url: `/api/car/car/${that.newCar[index].id}`,
              method: 'DELETE',
              success(res) {
                uni.showToast({
                  title: '删除成功',
                  icon: 'none'
                });
                that.car = [];
                that.newCar = [];
                that.getData();
              }
            })
            // console.log('用户点击确定');
          } else if (res.cancel) {
            uni.showToast({
              title: '取消成功',
              icon: 'none'
            });
          }
        }
      });

    },

    getData() {
      const that = this;
      this.$http({
        url: `/api/car/car/list`,
        method: 'GET',
        success(res) {
          console.log(res)
          console.log(res.data.rows);
          that.car = res.data.rows;
          for (let i = 0; i < that.car.length; i++) {
            if (that.car[i].userId === uni.getStorageSync('user_id')) {
              that.newCar.push(that.car[i]);
            }
          }
          // console.log(that.newCar)
        }
      })
    },
  },
  onLoad() {
    this.getData();
  },
  onShow() {
    // 重新获取用户信息，这里假设通过一个名为`fetchUserInfo`的方法来获取数据
    if (!this.isFirstLoaded) {
      this.isFirstLoaded = true;
    } else {
      this.car = [];
      this.newCar = [];
      this.getData();
    }
  },
}
</script>

<style>
.top {
  height: 150px;
  background-image: url("../../../static/images/ly/组 6.png");
}

.button {
  height: 30px;
  width: 250px;
  font-size: 15px;
  background-color: #3486FD;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

</style>